<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>物流信息</title>
<%@ include file="/WEB-INF/component/commonCSS.jsp"%>
<!--[if lt IE 9]>
        <script src="lib/js/html5shiv.min.js"></script>
        <script src="lib/js/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
body {
	font-family: "Lucida Grande", Tahoma, Verdana, Lucida, Arial, Helvetica,
		sans-serif, "宋体";
	font-size: 12px;
}
li.tx1,li.tx2{
margin-left:25px;
}

#process {
	margin: 50px;
	padding: 25px 0 80px;
}

#process .node, #process .proce {
	float: left;
	position: relative;
	height: 18px;
	background-image: url(${ctx}/lib/img/bg_state.jpg);
	background-repeat: no-repeat;
}

#process .node.ready {
	width: 13px;
	background-position: -140px 0px;
}

#process .node.doing {
	width: 13px;
	background-position: -140px -60px;
}

#process .node.wait {
	width: 13px;
	background-position: -140px -40px;
}

#process .proce {
	width: 140px;
}

#process .proce.doing {
	background-position: 0 -20px;
	color: #360;
}

#process .proce.wait {
	background-position: 0 -40px;
	color: #360;
}

ul {
	display: inline-block;
	list-style: none;
}

#process ul {
	padding-top: 18px; /*margin-left: -152px;*/
	margin-left: -190px;
	display: inline-block;
	margin-top: 0px;
	position: absolute;
	width: 314px;
	text-align: center;
	list-style: none;
}

#process .proce ul {
	z-index: 5;
	width: 150px;
}

#process .node ul {
	z-index: 1;
	width: 275px;
	margin-left: -125px;
}

#Logistics li {
	padding: 5px 0px;
}

#process .tx2 {
	color: #999;
	line-height: 15px;
	text-align: right;
	
}

#OrderInfo {
	margin: 5px;
	border: 0px;
	width: 95%;
}

#OrderInfo th {
	background-color: #FFFCEB;
	text-align: right;
	width: 120px;
}

#OrderInfo td {
	text-align: left;
}

#processexplain div {
	float: right;
	height: 18px;
	background-image: url(${ctx}/lib/img/bg_state.jpg);
	background-repeat: no-repeat;
	padding-left: 16px;
	margin-right: 20px;
}
/*增加，否则ie6有问题*/
* html #process .node {
	background-position-x: -150px;
}

* html #process .proce {
	background-position-x: 0;
}

* html #process .wait {
	background-position-y: -40px;
}

* html #process .doing {
	background-position-y: -20px;
}

* html #process .ready {
	background-position-y: 0;
}

* html #process .singular {
	background-position-y: -60px;
}
/*ff*/
#process .node ul {
	z-index: 1;
	width: 200px;
	margin-left: -125px;
}
/* ie8+*/
#process .node ul {
	z-index: 1\9;
	width: 200px\9;
	margin-left: -125px\9;
}
/*ie6 7 特殊处理*/
#process .node ul {
	*z-index: 1;
	*width: 200px;
	*margin-left: -90px;
}
/*google*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#process .node ul {
		z-index: 1;
		width: 200px;
		margin-left: -125px;
	}
}
</style>
</head>
<body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">	
	<section class="content-header">	
	<div class=" box box-success" style="margin-top:-4px">
           <!--   <div class="box-header with-border">
                <h3 class="box-title">物流号：${form.orderPackId }</h3>
                <div class="box-tools pull-right">
                </div>
            </div>-->
            <div class="box-body mchart"  style="margin-top:-30px">
                <div id="process">               
				<div id="node1"  class="node ${form.joinStatus }">
					<ul>
						<li class="tx1">制定计划</li>
						<li class="tx2">${form.joinPlanTime }</li>
					</ul>
				</div>
				<div id="proce1" class="proce ${form.joinStatus }"></div>
				<div id="node2" class="node ${form.subStatus }">
					<ul>
						<li class="tx1">提交时间</li>
						<li class="tx2">${form.submitDatetime }</li>
					</ul>
				</div>
				<div id="proce2" class="proce ${form.subStatus }"></div>
				<div id="node3" class="node ${form.confirmStatus }">
					<ul>
						<li class="tx1">企业确认</li>
						<li class="tx2">${form.orderConfirmTime }</li>
					</ul>
				</div>
				<div id="proce3" class="proce ${form.confirmStatus }"></div>
				<div id="node4" class="node ${form.delStatus }">
					<ul>
						<li class="tx1">出库</li>
						<li class="tx2">${form.delDatetime }</li>
					</ul>
				</div>
				<div id="proce4" class="proce ${form.delStatus }"></div>
				<div id="node5" class="node ${form.recpStatus }">
					<ul>
						<li class="tx1">收货</li>
						<li class="tx2">${form.recpDatetime }</li>
					</ul>
				</div>


			</div>
			<div id="processexplain" style="margin-top:-50px">
				<div style="background-position: -140px -37px;">订单未到达节点</div>
				<div style="background-position: -140px -57px">订单当前所处节点</div>
				<div style="background-position: -140px 3px;">订单已通过节点</div>
			</div>
        </div>

     </div>   
        
          
       <div class=" box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">订单追踪</h3>
                <div class="box-tools pull-right">
                    <!-- <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> -->
                </div><!-- /.box-tools -->
            </div><!-- /.box-header -->
            <ul style="margin-top:10px">
                <c:forEach items="${rows }" var="list">
                	<li>${list }</li>
                </c:forEach>
                </ul> 
                <div style="margin: 8px; padding-left: 10px; color: Red; display: none;">
                                                    上述信息红色字体部分物流信息由配送企业:<span id="CompanyName_PS1"></span>提供，如有疑问请与配送企业或平台联系！</div>
        </div>
        
      

</section>
	<%@ include file="/WEB-INF/component/commonJS.jsp"%>
	<script type="text/javascript" src="${ctx }/lib/js/JOrderInfo.js"></script>
	<script type="text/javascript">
			
			
			        

		//到货确认
		
	</script>
</body>
</html>